@import 'variables';

match-score {
  .seed-underline::before {
    z-index: 1;
  }
  .score-detail-wrap {
    background-color: color(c10);
  }
  .detail-list {
    &:last-child {
      padding-bottom: pxTorem(80);
    }
    .detail-item {
      height: pxTorem(252);
      padding: pxTorem(30) 0 pxTorem(26);
      box-sizing: border-box;
      position: relative;
      &:last-child:before {
        content: none;
      }
    }
  }
  .score-title {
    color: color(c3);
    font-size: standard($f, f6);
    padding: 0 pxTorem(24);
    height: pxTorem(64);
  }
  .score-info {
    display: flex;
    .team-box {
      flex: 1;
      position: relative;
      &:first-child {
        .team-member {
          position: absolute;
          left: 18%;
        }
      }
      &:last-child {
        .team-member {
          position: absolute;
          right: 18%;
        }
      }
    }
    .team-member {
      width: pxTorem(154);
      text-align: center;
      line-height: 1;
      &.waiver::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 0;
        right: 0;
        margin: auto;
        @include icon(74, 74, '#{$icons-path}/waiver.png');
      }
      .team-picture {
        position: relative;
        height: pxTorem(72);
        width: pxTorem(72);
        border-radius: 50%;
        margin: 0 auto;
        border: 2px solid color(c10);
        display: inline-block;
        &:nth-child(2) {
          margin-left: pxTorem(-38);
        }
      }
      .team-name {
        padding-top: pxTorem(30);
        color: color(c2);
        font-size: standard($f, f6);
      }
    }
    .score-panel {
      text-align: center;
      line-height: 1;
      padding-top: pxTorem(24);
      width: pxTorem(164);
      .status-list {
        font-size: standard($f, f14);
        color: color(c2);
      }
      .cancel {
        color: color(c6);
        font-size: standard($f, f2);
      }
      .result {
        span:nth-child(2) {
          margin: 0 pxTorem(6);
        }
      }
      button {
        margin-top: pxTorem(32);
        color: color(c10);
        height: pxTorem(40);
        width: pxTorem(140);
        font-size: standard($f, f6);
        background-color: color(c1);
        border-radius: pxTorem(20);
      }
    }
    &.many-people {
      .team-member {
        &.waiver::after {
          @include icon(124, 74, '#{$icons-path}/waiver_two.png');
        }
      }
    }
    @media screen and (min-width: 360px) {
      .team-member {
        width: pxTorem(192);
      }
    }
    @media screen and (min-width: 400px) {
      .team-member {
        width: pxTorem(218);
      }
    }
  }
  .group-match {
    background-color: color(c9);
    padding-top: pxTorem(20);
    .detail-list {
      margin-bottom: pxTorem(20);
      background-color: color(c10);
      &:last-child {
        margin-bottom: 0;
      }
      .detail-item:nth-child(2) {
        padding-top: 0
      }
    }
    .mssvo-title {
      padding: pxTorem(24) pxTorem(24);
      font-size: standard($f, f3);
      color: color(c2);
      font-weight: bold;
      position: relative;
      line-height: 1;
      span:last-child {
        margin-left: pxTorem(20);
      }
      &:before {
        content: '';
        background-color: color(c1);
        width: pxTorem(6);
        height: pxTorem(25);
        position: absolute;
        top: pxTorem(24);
        left: 0;
      }
    }
  }
}
